<template>
  <div>
    <h1>角色添加</h1>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="角色名称">
        <el-input v-model="form.role" />
      </el-form-item>
      <el-form-item label="权限名称">
        <el-tree style="max-width: 600px"
         :data="form.auths" 
         :props="defaultProps" 
         show-checkbox
          @check-change="handleCheckChange" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import arrToTree from '@/utils/arrToTree';
import axios from "axios"
// do not use same name with ref
const form = reactive({
  role: '',
  auths: []
})
axios({
  url:"/role/getlist",
  method:"get"
}).then(res=>{
  console.log(res,'res')
  form.auths=arrToTree(res.data.routerData)
  console.log(form)
})
const onSubmit = () => {
  console.log('submit!')
  axios({
    url:'/api/role/add',
    method:"post",
    data:{
      role:form.role,
      auths:form.auths
    }
  }).then(res=>{
    console.log(res)
  })
}
const defaultProps = {
  children: 'children',
  label: 'name',
}

// const data =
const handleCheckChange = () => {

}
</script>

<style></style>